<template>
	<view class="welcome">
		<image src="../../static/welcome.png" class="img"></image>
		<!-- <view class="btn" @click="tohome">进入首页</view> -->
		<view class="btno">
			<text @click="tohome(1)">
				 {{count}}
			</text>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				count: 5
			}
		},
		methods: {
			gohome() {
				let timer = setInterval(() => {
					this.count -= 1
					if (this.count === -1) {
						this.count = '跳过'
						clearInterval(timer)
						// uni.switchTab({
						// 	url: '/pages/home/home',
						// });
					}
				}, 1000)
			},
			tohome(num) {
				if(num==1){
					if(this.count == '跳过'){
						uni.switchTab({
							url: '/pages/home/home',
						});
					}
				}else{
					uni.switchTab({
						url: '/pages/home/home',
					});
				}
				
			}
		},
		mounted() {
			this.gohome()
		}
	}
</script>
<style lang="scss">
	.welcome {
		width: 100vw;
		height: 100vh;
		position: relative;

		.img {
			width: 100vw;
			height: 100vh;
		}

		.btn {
			width: 200rpx;
			height: 70rpx;
			position: fixed;
			top: 60%;
			left: 50%;
			transform: translate(-50%, -50%);
			background: darkgreen;
			color: white;
			text-align: center;
			border-radius: 35px;
			line-height: 70rpx;
			animation: identifier 4s;
			border: none;
			transition: 1s all;
		}

		.btno {
			width: 150rpx;
			height: 50rpx;
			position: fixed;
			top: 5%;
			left: 70%;
			background: darkgreen;
			color: white;
			text-align: center;
			border-radius: 25px;
			line-height: 50rpx;
			border: none;

		}

		@keyframes identifier {
			0% {
				top: 150%;
				border: none;
			}

			100% {
				top: 60%;
				border: none;
			}
		}
	}
</style>